<template>
  <div class="confessions flex flex-col items-center">
    <div class="confessions_title"></div>
    <div class="flex record_list justify-between">
      <div v-for="item in recordListArr" :key="item.giftImg" class="record_item flex flex-col items-center">
        <div class="record_box flex justify-center items-center relative">
          <!--          <img :src="getAssetsFile(`homepage/tips/${item.tipImg}.png`)" class="record_tips absolute" alt="" />-->
          <!--          <img :src="getAssetsFile(`homepage/${item.giftImg}.png`)" class="record_img" :class="item.class" alt="" />-->
          <img :src="item.picture" class="record_img" :class="item.class" alt="" />
        </div>
        <span class="record_name">{{ item.name }}</span>
      </div>
    </div>
    <span class="record_list_tips">
      {{ homeData.cpList.length ? '结为cp后互赠直刷礼物可增长心动值哦！' : '互赠520礼物可结为cp' }}
    </span>
    <img src="@/assets/homepage/cp/title.png" class="cp_title" alt="" />

    <div v-if="homeData.cpList.length" class="flex flex-col">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div class="snow_img"></div>
        <div class="cp_list_box">
          <div
            v-for="(item, index) in homeData.cpList"
            :key="item.id"
            :class="{ bg_FEF0FF: index % 2 == 0 }"
            class="cp_box flex justify-between"
          >
            <div class="flex">
              <div
                class="head_portrait_box flex justify-center items-center relative"
                @click="postMessage(CLINET_COMMAND.USER_CENTER, { userId: item.user.id })"
              >
                <img :src="item.user.avatar" class="head_img border_50" alt="" />
                <img
                  v-if="item.user.special.avatar.material"
                  :src="item.user.special.avatar.material"
                  class="head_port_img absolute"
                  alt=""
                />
              </div>
              <div
                class="flex flex-col cp_info"
                @click="postMessage(CLINET_COMMAND.USER_CENTER, { userId: item.user.id })"
              >
                <span class="cp_name">{{ item.user.nickname }}</span>
                <span class="id">ID:{{ item.user.code }}</span>
              </div>
            </div>
            <div class="flex items-center">
              <span class="cardiac_value">心动值</span>
              <span class="cp_value">{{ formatBigNumber(item.score) ?? '0' }}</span>
              <div class="interactive_btn" @click="jumpRoom(item)"></div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div v-else class="no_list flex justify-center">
      <div class="go_btn" @click="getAppData"></div>
    </div>
  </div>
</template>

<script lang="ts" setup name="homepage">
// import { getAssetsFile } from '@/utils'
import { getAppIndexApi, getCpApi, getGiftApi } from '@/api/home'
import { IGiftItem, IListItem } from '@/views/homepage/type'
import { CLINET_COMMAND } from '@/utils/types'
import { postMessage, formatBigNumber } from '@/utils'
import DW from '@/assets/gift/watch.png?url'
import special from '@/assets/gift/specialEffects.png?url'
import picture from '@/assets/gift/pictureFrame.png?url'
import { values } from 'lodash'

const loading = ref <boolean>(false)
const finished = ref<boolean>(false)
const page = ref(1)

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  getCpData(page.value)
}

const recordListArr = ref([
  { giftImg: 'goddessPendant', class: '', tipImg: 'airBubbles', name: 'DW情侣手表', picture: DW },
  {
    giftImg: 'goddessHeadBox',
    class: '',
    tipImg: 'pendant',
    picture,
    name: '恋爱物语头像框',
  },
  {
    giftImg: 'goddessBubbles',
    class: '',
    tipImg: 'tire',
    picture: special,
    name: '恋爱物语入场特效',
  },
])

const homeData: { cpList: IListItem[] } = reactive({
  cpList: [],
})

async function getCpData(page: number) {
  const { data } = await getCpApi<{ list: IListItem[]; meta: { page: number } }>(10, page)
  data!.list.map((item) => homeData.cpList.push(item))
  loading.value = false
  if (data!.list.length < 10) {
    finished.value = true
  }
}

async function getGiftData() {
  const { data } = await getGiftApi<{ gifts: IGiftItem[] }>()
  data!.gifts.map((item, index) => (recordListArr.value[index].picture = item.picture))
}

const roomId = ref()
async function getAppData() {
  const { data } = await getAppIndexApi<{ room_id: number; popularity: number }[]>()
  const maxList = data?.reduce((pre, curr) => {
    return pre.popularity > curr.popularity ? pre : curr
  })
  roomId.value = maxList?.room_id
  postMessage(CLINET_COMMAND.GO_HOME, { roomId: roomId.value })
}

function jumpRoom(item: any) {
  if (item.room) {
    postMessage(CLINET_COMMAND.GO_HOME, { roomId: item.room.id })
  } else {
    postMessage(CLINET_COMMAND.USER_CENTER, { userId: item.user.id })
  }
}

getCpData(page.value++)
// getGiftData()
// getAppData()
</script>

<style lang="scss" scoped>
@import 'index';
</style>
